<!--
 * @Author: 陆成杰
 * @Date: 2022-06-29 11:04:44
 * @LastEditTime: 2022-07-05 14:32:47
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/program-manager/Notice.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div class="notice">
    <div class="marquee">
      <!-- <Marquee class="marquee-item" :noticeContent="state.noticeContent"></Marquee> -->
      <div class="wrap">
        <div class="content">
          <div class="screen">
            <div class="noticecontent">
              <!-- {{ state.noticeContent }} -->
              <div v-html="state.quillHtml"></div>
              </div>
            <div class="rewrite"><button @click="publishNotice">发布</button></div>
          </div>
        </div>
      </div>
    </div>
    <div class="quill">
      <!-- <Quill class="quill-item"></Quill> -->
      <QuillEditor
        ref="myQuillEditor"
        theme="snow"
        toolbar="full"
        v-model="state.noticeContent"
        @textChange="onEditorChange($event)"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive,ref } from "vue";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import axios from "axios"
// import { postNotice } from "../../axios/nitice"
// import Marquee from "./Marquee.vue";
// import Quill from "./Quill.vue";

const state = reactive({
  noticeContent: "",
  quillHtml: "",
});
const myQuillEditor = ref()
const onEditorChange = ({ delta, oldContents, source }) => {
  console.log("editor change!", delta, oldContents, source);
  // state.noticeContent = text;
  let content = delta.ops.map((item) => {
    if (item.insert) {
      return item.insert;
    }
  });
  console.log(content);
  
  if (content) {
    content.forEach((val) => {
      if(val)
      state.noticeContent += val;
    });
  }
  content = ""
  // html
  console.log("this is html !", myQuillEditor.value.getHTML());
  state.quillHtml = myQuillEditor.value.getHTML()
  // for(let i=0;i<delta.ops.length;i++){
  //   console.log(111);

  //   if(ops[i].insert){
  //     state.noticeContent += ops[i].insert
  //     console.log(state.noticeContent);

  //   }
  // }
};

// 获取html

const publishNotice = () => {
  // state.noticeContent = ""
  // state.quillHtml = ""
  // postNotice("123", state.quillHtml).then(res => {
  //   console.log(res);
    
  // })
  axios.post("http://121.40.100.193:3000/postnotice", {content: state.quillHtml}).then( res => {
    console.log(res)
  })
}



</script>

<style lang="less" scoped>
.notice {
  width: 99%;
  height: 85vh;
  background-color: rgb(41, 45, 62);
  // padding: 30px;
}
.marquee {
  width: 80vw;
  height: 55vh;
  // background-color: #000;
}
.quill {
  width: 91%;
  height: 130px;
  margin-top: 50px;
  margin-left: 45px;
  color: #fff;
  &-item {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 18px;
  }
}
.wrap {
  width: 100%;
  height: 100%;
  // background-color: #fff;
  padding-top: 30px;
  padding-left: 50px;
}
.content {
  width: 90%;
  height: 90%;
  background-color: #000;
  // margin-top: 7%;
  border: 20px solid #ab6e2b;
}
.screen {
  width: 96.5%;
  height: 91%;
  border: 20px solid #fff;
  overflow: hidden;
  position: relative;
}
.noticecontent {
  color: #fff;
  -webkit-animation: mymove 8s linear infinite;
}
@keyframes mymove {
  0% {
    transform: translateX(95%);
  }
  100% {
    transform: translateX(0%);
  }
}
.rewrite button{
  position: absolute;
  right: 10px;
  bottom: 10px;
}
</style>